<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <#assign base=request.contextPath  />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/frame/static/css/style.css">
    <link rel="icon" href="${base}/frame/static/image/code.png">
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <script type="text/javascript" src="${base}/frame/layui/layui.all.js"></script>
    <script src="${base}/js/jquery-1.8.3.min.js"></script>

    <style type="text/css">
        form{
            padding:20px;
        }
        .layui-btn-radius{
            border-radius: 5px;
        }
    </style>
</head>
<body>
<form method="get" action="" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><a style="color:red">*</a>&nbsp;角色</label>
            <div class="layui-input-block">
                <select name="city" lay-search="" lay-verify="required" id="roles">

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" class="layui-input" lay-verify="account" placeholder="手机号" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline" style="float: left;">
                <input type="text" id="code" name="code" class="layui-input" style="width:200px; float: left;" lay-verify="pwd" placeholder="验证码" maxlength="20"/>
                <button  class="layui-input" style="width:150px; float: left;" onclick="getsms()" type="button">获取验证码</button>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="password" id="password" name="password" class="layui-input" lay-verify="password" placeholder="输入密码" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="confirm" class="layui-input" lay-verify="twopassword" id="confirm" placeholder="再次输入密码" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-radius" lay-submit="" type="button" onclick="sub()" lay-filter=""style="background-color: #0092EF;">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
            </div>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'layedit'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit


    });
    findRole();
    //查询字典表状态
    var bas='${base}';
    var homeState=   getDataByCode(bas,"area");
    for(var i=0;i<homeState.length;i++){
        $("#areaId").append(
                '<option value="'+homeState[i].id+'">'+homeState[i].name+'</option>'
        )
    }
    function getsms(){
        var btn = document.getElementsByTagName('button')[0];
        var time = 60; //定义时间变量。用于倒计时用
        var timer = null; //定义一个定时器；
        timer = setInterval(function() { ///开启定时器。函数内执行
            btn.disabled = true;
            btn.innerText = time + "秒后重新发送"; //点击发生后，按钮的文本内容变成之前定义好的时间值。
            time--; //时间值自减
            if (time == 0) { //判断,当时间值小于等于0的时候
                btn.innerText = '获取验证码'; //其文本内容变成……点击重新发送……
                btn.disabled = false;
                clearInterval(timer); //清除定时器
            }
        }, 1000);
        setTimeout(function(){
            $.ajax({
                type:"POST",
                url:"${base}/comUser/SendSMS",
                data:{userPhone:$("#phone").val()},
                async:false,
                success:function (data) {

                    layer.msg(data);

                }
            })
        },1000)

    }
    function sub(){

        var first=$("#password").val();
        var sec=$("#confirm").val();
        if (first!=sec) {
            alert("两次输入密码不一致")
        }else {
            var requestData={};
            requestData.roleId=$("#roles").val();
            requestData.username=$("#username").val();
            requestData.password=$("#password").val();
            requestData.areaId=$("#areaId").val();

            $.ajax({
                type : "POST", //提交方式
                url : "${base}/comUser/equalsCache",//路径
                data:{param:JSON.stringify(requestData),callPhone:$("#phone").val(),code:$("#code").val(),password:$("#password").val()},
                success : function(data) {//返回数据根据结果进行相应的处理
                    layer.msg("添加成功")
                    $(".dialog").hide(200)
                    <#--var table = layui.table;-->
                    <#--//表刷新方法-->
                    <#--table.reload('test', {-->
                        <#--url: '${base}/comUser/userAdminList'-->
                        <#--,where: {} //设定异步数据接口的额外参数-->
                        <#--//,height: 300-->
                    <#--});-->
                    window.parent.location.reload();
                    window.location.href = '${base}/comUser/userAdmin';
                }
            });
        }

    }


    function  findRole(){
        $.ajax({
            type : "POST", //提交方式
            url : "${base}/totalRole/findRole",//路径
            success : function(data) {//返回数据根据结果进行相应的处理
                for(var i=0;i<data.data.length;i++){
                    $("#roles").append(
                            '<option value="'+data.data[i].id+'">'+data.data[i].roleName+'</option>'
                    )

                }
                layui.form.render();

            }
        });
    }

</script>
</body>

</html>
